<template>
  <basic-container v-loading="saveLoading">
    <div style="width:100%;min-height: 50px;padding-left:5px;display: inline-block;">
      <el-container>
        <el-container>
          <el-aside width="100px">
            <el-button type="primary" @click="handlePrint" style="float: left;">打印</el-button>
          </el-aside>
        </el-container>
      </el-container>
    </div>
    <template>
      <div id="printDetail">
          <div style="background:#fff;height: 50px;line-height: 50px;margin-bottom: 10px">
            <div class="pull-auto"  style="text-align: left;font-size: 16px;color:#3478f5;margin-right:10px">
              <div class="block">
                车间：{{workshopName}} <i class="el-breadcrumb__separator el-icon-arrow-right"></i>产线模型名称：{{realityLineName}}<i class="el-breadcrumb__separator el-icon-arrow-right"></i>产线模板： {{lineTplName}}<i class="el-breadcrumb__separator el-icon-arrow-right"></i>
                产线类型：{{lineType}}
              </div>
            </div>
          </div>
          <div class="form-designer">
            <el-container style="border: #e0e0e0 solid 1px;border-top:none">
              <el-main class="demo">
                <avue-flow :height="800"
                           width="100%"
                           ref="flow"
                           :option="option"
                           v-model="flowForm">
                  <template #header="{node}" >
                    {{(node || {}).name}}
                  </template>
                  <template slot-scope="{node}">
                    <el-collapse :ref="node.id+`Ref`"  v-model="formCollapse" :style="{width:'100%',zIndex:zIndexStyle}"  @mouseover.native="handleMouseEnter(node.id)"  @mouseout.native="handleMouseLeave(node.id)">
                      <el-collapse-item title="工序属性" :name="node.id">
                        <span style="color:red;margin-left: 15px;">{{form[node.id+`_workshopSection`]}}</span>
                        <el-descriptions  v-if="form[node.id+`show`]" class="margin-top" v-for="(workstationArray ,i)  in form[node.id+`_workstationArray`]"  :title="`工位`+i" :column="1" size="small" border >
                          <el-descriptions-item label="设备">
                            <deviceSelect   :ref="node.id+`_`+i+`_devicePage`"
                                            v-model="form[node.id+`_`+i+`_device`]"
                                            attributeName="设备"
                                            attributeField="device"
                                            :no="i"
                                            :disType="true"
                                            :deviceClass="form[node.id+`_`+i+`_deviceClass`]"
                                            :nodeId = "node.id"
                                            :seleteOptions="deviceList"
                                            :defaultVal ="form[node.id+`_`+i+`_device`]"
                                            @handleMouseEnter="handleMouseEnter(node.id)"  @handleMouseLeave="handleMouseLeave(node.id)"
                                            @handleSelectData = "handleSelectData"/>
                            <div element-loading-text="拼命加载中"  element-loading-spinner="el-icon-loading" v-loading="deviceList.length==0"></div>
                          </el-descriptions-item>

                          <el-descriptions-item label="工具">
                            <deviceSelect   :ref="node.id+`_`+i+`_toolPage`"
                                            v-model="form[node.id+`_`+i+`_tool`]"
                                            attributeName="工具"
                                            attributeField="tool"
                                            :no="i"
                                            :disType="true"
                                            :deviceClass="form[node.id+`_`+i+`_deviceClass`]"
                                            :nodeId = "node.id"
                                            :seleteOptions="toolList"
                                            :defaultVal ="form[node.id+`_`+i+`_tool`]"
                                            @handleMouseEnter="handleMouseEnter(node.id)"  @handleMouseLeave="handleMouseLeave(node.id)"
                                            @handleSelectData = "handleSelectData"/>
                            <div element-loading-text="拼命加载中"  element-loading-spinner="el-icon-loading" v-loading="toolList.length==0"></div>
                          </el-descriptions-item>

                          <el-descriptions-item label="夹具">
                            <deviceSelect   :ref="node.id+`_`+i+`_clampPage`"
                                            v-model="form[node.id+`_`+i+`_clamp`]"
                                            attributeName="夹具"
                                            attributeField="clamp"
                                            :no="i"
                                            :disType="true"
                                            :deviceClass="form[node.id+`_`+i+`_deviceClass`]"
                                            :nodeId = "node.id"
                                            :seleteOptions="clampList"
                                            @handleMouseEnter="handleMouseEnter(node.id)"  @handleMouseLeave="handleMouseLeave(node.id)"
                                            :defaultVal ="form[node.id+`_`+i+`_clamp`]"
                                            @handleSelectData = "handleSelectData"/>
                            <div element-loading-text="拼命加载中"  element-loading-spinner="el-icon-loading" v-loading="clampList.length==0"></div>
                          </el-descriptions-item>
                        </el-descriptions>
                      </el-collapse-item>
                    </el-collapse>
                  </template>
                </avue-flow>

              </el-main>
            </el-container>
          </div>
      </div>
    </template>
  </basic-container>
</template>

<script>
    import {getPfocProcessList } from '@/api/pfoc/pfocprocess'
    import { getObj} from '@/api/pfoc/factorysettings' //获取当前工厂信息
    import { getDevice,getDeviceClassList} from '@/api/hengdong/pfocinterface'//获取设备相关
    import { updateModelingLine,getLineModelingInfo } from '@/api/pfoc/realityproducelinemodeling' //产线建模修改与获取产线建模信息

    /**引入设备下拉框*/
    import deviceSelect from '@/views/pfoc/realityproductline/custom-select'

    export default {
        name: "view-line-modeling",
        components: {
            //设备下拉框
            deviceSelect,
        },
        props:{
            lineId:{//产线ID
                type:String
            },
        },
        data() {
            return {
                formCollapse: [],
                count: 0,
                nodeCount:0,//节点下标
                form: [],//提交时数据集合
                flowForm:'',
                pfocProcessList:[],//工序集合
                option: {
                    name: null,
                    nodeList: [],//工序节点集合
                    lineList: [],//工序各节点指向顺序集合
                },
                logList:[],//操作日志集合
                realityLineName:null,//产线名称
                deviceList:[],//设备集合
                clampList:[],//夹具集合
                toolList:[],//工具集合
                deviceClassList:[],//设备分类集合
                organizationId:null,//组织ID
                organizationName:null,//组织名称
                saveLoading:false,//保存时遮罩开关
                lineModelingDetailsDelIds:[],//存储需要删除的节点工序ID（即已有工序删除ID）
                zIndexStyle:"",
                mainData:{},//真实产线主数据
                subData:[],//真实产线详情数据
                lineTplId:null,//产线模板ID
                lineTplName:null,//产线模板名称
                workshopId:null,//车间ID
                workshopName:null,//车间名称
                lineType:null,//产线类型（手动线、自动线）
            };
        },
        watch: {
          formCollapse(newVal, oldVal) {
            const len = newVal.length
            if (len > 3) {
              newVal.length = 3
              //修改提示
              this.$message.warning("一次最多打开三个。")
              return
            }
            oldVal.map(item => {
              this.form[item + 'show'] = false
            })
            newVal.map(item => {
              this.form[item + 'show'] = true
              //重置自定义下拉框选项
              for (var i = 0; i < this.option.nodeList.length; i++) {
                var nodeId = this.option.nodeList[i].id;
                if(nodeId===item) {
                  var workstationArray = this.form[nodeId + `_workstationArray`];
                  //循环工序属性取出每个工序的个属性数据加入到对象
                  for (var j = 0; j < workstationArray.length; j++) {
                    let refDevice = nodeId + "_" + j + "_devicePage";//获取到当前的ref
                    this.$nextTick(() => {
                      this.$refs[refDevice][0].deviceSelectInit();
                    })
                    let refTool = nodeId + "_" + j + "_toolPage";//获取到当前的ref
                    this.$nextTick(() => {
                      this.$refs[refTool][0].deviceSelectInit();
                    })
                    let refClamp = nodeId + "_" + j + "_clampPage";//获取到当前的ref
                    this.$nextTick(() => {
                      this.$refs[refClamp][0].deviceSelectInit();
                    })
                  }
                }
              }
            })
          }
        },
        created() {
            //获取当前工厂信息
            this.getFactoryInfo();
            //获取设备分类数据
            // this.getDeviceClassListData();
        },
        computed: {
            nodeList () {
                return this.option.nodeList
            }

        },
        mounted() {
            this.nodeCount = this.option.nodeList.length;//初始化节点下标
            //获取工序
            this.getPfocProcessListData();
        },
        methods: {
            getLineModelingInfos(){
                this.formCollapse = []
                if(!this.validatenull(this.lineId)) {
                    this.saveLoading = true
                    getLineModelingInfo(this.lineId).then(response => {
                        this.$refs.flow.resetPlumb();
                        var data =response.data.data;
                        //主表数据
                        this.mainData= data.realityProduceLineModeling;//主数据
                        //子表数据
                        this.subData = data.realityProduceLineModelingDetailsList;//子表数据
                        //产线名模型称
                        this.realityLineName =this.mainData.realityLineName;
                        //产线模板ID
                        this.lineTplId =this.mainData.lineTplId;
                        //产线模板名称
                        this.lineTplName = this.mainData.lineTplName;
                        //车间ID
                        this.workshopId = this.mainData.workshopId;
                        //车间名称
                        this.workshopName = this.mainData.workshopName;
                        //产线类型
                        this.lineType = this.mainData.lineType;
                        //设置反显工序
                        this.option.nodeList = JSON.parse(this.mainData.processNodes);
                        //设置反显工序指向顺序
                        this.option.lineList =  JSON.parse(this.mainData.processNodeLine);
                        //初始化节点下标
                        var n =  this.option.nodeList[ this.option.nodeList.length-1].id;
                        this.nodeCount = parseInt(n.split("node")[1])+1;

                        //注册动态节点变量
                        for(var n=0;n<this.subData.length;n++) {
                            var  nodeId = this.subData[n].nodeId;
                            var workstationArray = new Array();
                            if(!this.validatenull(this.subData[n].workstationArray)){
                                workstationArray = JSON.parse(this.subData[n].workstationArray);
                            }
                            this.$set(this.form, nodeId + "_workstationArray", workstationArray);
                            this.$set(this.form, nodeId + "_processName", this.subData[n].processName);//注册动态节点-当前工序名称
                            this.$set(this.form, nodeId + "_processId", this.subData[n].id);//注册动态节点-当前工序ID
                            if(this.validatenull(this.subData[n].workshopSection)){
                                this.$set(this.form, nodeId+ "_workshopSection", null);//注册动态节点-工段
                            }else {
                                this.$set(this.form, nodeId + "_workshopSection", this.subData[n].workshopSection);//注册动态节点-工段
                            }

                            //循环工序属性取出每个工序的个属性数据加入到对象
                            for (var j = 0; j< workstationArray.length;j++) {
                                this.$set(this.form, nodeId +"_" + j + "_device", workstationArray[j].device);//注册动态节点-设备
                                this.$set(this.form, nodeId +"_" + j + "_tool", workstationArray[j].tool);//注册动态节点-工具
                                this.$set(this.form, nodeId +"_" + j + "_clamp", workstationArray[j].clamp);//注册动态节点-夹具
                                this.$set(this.form, nodeId +"_" + j + "_deviceName", workstationArray[j].deviceName);//注册动态节点-设备名称
                                this.$set(this.form, nodeId +"_" + j + "_toolName",workstationArray[j].toolName);//注册动态节点-工具名称
                                this.$set(this.form, nodeId +"_" + j + "_clampName",workstationArray[j].clampName);//注册动态节点-夹具名称

                            }
                        }
                        //重新初始化flow组件
                        this.$refs.flow.init();
                        this.$refs.flow.cleanupDarg();
                        this.saveLoading = false
                    }).catch(() => {
                        this.saveLoading = false
                    })
                }
            },
            /**获取工序*/
            getPfocProcessListData(){
                getPfocProcessList().then(response => {
                    this.pfocProcessList=response.data.data;
                    //显示各个工序所属工段
                    for (var i = 0; i < this.option.nodeList.length; i++) {
                        var nodeId = this.option.nodeList[i].id;
                        for(var j = 0;j< this.pfocProcessList.length;j++){
                            if( this.pfocProcessList[j].id == this.option.nodeList[i].mark){
                                this.$set(this.form, nodeId + "_workshopSection",this.pfocProcessList[j].workshopSection);//注册动态节点-工段
                            }
                        }
                    }
                })

            },
            /**获取工厂信息*/
            getFactoryInfo() {
                const factoryId=1;
                getObj(factoryId).then(response => {
                    this.organizationId = response.data.data.menuId;//组织ID
                    this.organizationName = response.data.data.organizationName;//组织名称
                    //获取工厂设备集合
                    this.getFactoryDeviceList();
                })
            },
            /**获取工厂设备集合*/
            getFactoryDeviceList(){
                this.saveLoading = true
                var obj={
                    position:this.organizationName,//设置组织查询条件
                }
                getDevice(obj).then(response => {
                    this.deviceList = response.data.data;//设备集合
                    for(var i =0; i<this.deviceList.length;i++){
                        if(this.deviceList[i].deviceClass==20){//组织下工具夹具筛选
                            this.clampList.push(this.deviceList[i]);//夹具集合
                            this.toolList.push(this.deviceList[i]);//工具集合
                        }
                    }
                    this.saveLoading = false
                })
            },
            /**获取设备分类数据*/
            getDeviceClassListData(){
                getDeviceClassList().then(response => {
                    this.deviceClassList=response.data.data;
                })
            },
            //下拉框选择后返回数据
            handleSelectData(obj){
                this.form[obj.nodeId+"_" +obj.no+"_"+obj.attributeField] = obj.deviceSn;
                this.$set(this.form,obj.nodeId+"_" +obj.no+"_"+obj.attributeField + "Name", obj.deviceName);//注册动态节点-设备名称
            },
            //设备分类选择
            deviceClassChange(nodeId){
               console.log("1111")
                this.$set(this.form, nodeId+ "_device", null);//注册动态节点-设备
                this.$set(this.form, nodeId+ "_deviceName", null);//注册动态节点-设备名称
                let refDevice = nodeId + "_devicePage";//获取到当前的ref
                this.$nextTick(() => {
                    this.$refs[refDevice].deviceSelectInit();
                })
            },

            //打印
            handlePrint () {
                this.$Print('#printDetail');
            },
            //鼠标移到置顶
            handleMouseEnter(nodeId) {
                //属性鼠标移到展开
                // this.$set(this.showActive, nodeId, ['1']);
                let ref = nodeId+"Ref";//获取到当前的ref
                this.$refs[ref].$parent.$refs.node.style.zIndex="999999";
                this.zIndexStyle="1";

            },
            //鼠标移开取消置顶
            handleMouseLeave(nodeId) {
                //属性鼠标移开关闭
                // this.$set(this.showActive, nodeId, []);
                let ref = nodeId+"Ref";//获取到当前的ref
                this.$refs[ref].$parent.$refs.node.style.zIndex="2";
                this.zIndexStyle="";

            },
        }
    };
</script>

<style scoped>
  /deep/.avue-flow__node{
    height: auto!important;
  }
  /deep/ .avue-flow__node-header {
    line-height: 30px;
  }
  /deep/.el-descriptions__title {
    font-size: 14px;
    font-weight: 400;
    margin-top: 5px;
  }



  /*以下样式是打印的时候avue表格错乱修正方式（主要是序号列和操作列固定影响的）*/
  /deep/.el-table__fixed{
    display: none!important;
  }
  /deep/.el-table__fixed-right{
    display: none!important;
  }
  /deep/.el-table__cell.is-hidden>*{visibility:visible !important;}

  /deep/ .avue-grid{
    display: none!important;
  }
  /deep/.el-main{
    background:#fff !important;
  }
  /deep/.el-card__body{
    padding: 0px!important;
  }
  /*去掉滚动条样式*/
  .demo::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .demo {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
